<!DOCTYPE html>
<html lang="en">
<!-------------------------------------------------
This is a CSS drawing experiment to see what's possible with a single div. 
To learn more about this project: 
GitHub: https://github.com/lynnandtonic/a-single-div 
Mozilla Hacks: https://hacks.mozilla.org/2014/09/single-div-drawings-with-css/ 
Talk from CSSDay: https://lynnandtonic.com/thoughts/entries/talk-illustration-with-css/ 
Codepen: https://codepen.io/lynnandtonic
Tweet at me: @lynnandtonic
-----------------------------------------------
-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>A Single Div</title>
  <meta name="description" content="A CSS drawing experiment to see what’s possible with a single div.">
  <link rel="stylesheet" href="css/index.css">
  <link rel="icon" href="images/favicon.ico">
</head>

<body class="cf">
  <header>
    <h1>A Single Div: </h1>
    <p>&nbsp;a CSS drawing project by <a href="https://twitter.com/lynnandtonic">Lynn Fisher</a></p><a class="share-link"
      href="https://ctt.ec/DidfP">Tweet</a>
  </header><!-- 11 Dec 2018-->
  <div class="entry" id="penrose-triangle">
    <div></div>
  </div>
  <div class="entry" id="impossible-rectangle">
    <div></div>
  </div>
  <div class="entry" id="impossible-cube">
    <div></div>
  </div>
  <div class="entry" id="penrose-triangle-cube">
    <div></div>
  </div><!-- 9 Sep 2018-->
  <div class="entry wide" id="the-goddman-pen-is-blue">
    <div></div>
  </div><!-- 15 Apr 2018-->
  <div class="entry wide" id="xray"></div><!-- 7 Apr 2018-->
  <div class="entry" id="honey-badger">
    <div></div>
  </div>
  <div class="entry" id="cobra">
    <div></div>
  </div><!-- 4 Mar 2018-->
  <div class="entry" id="space-pizza"></div>
  <div class="entry" id="space-donuts"></div><!-- 14 Jan 2018-->
  <!-- Chill. This does not scale well and shows exactly why SVG is the better format for this kind of thing. -->
  <div class="entry wide" id="svg">
    <div class="no-scale"></div>
  </div><!-- 23 Dec 2017-->
  <div class="entry short threes" id="leia-organa">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="mon-mothma">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="padme-amidala">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="ahsoka-tano">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="rey">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="maz-kanata">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="jyn-erso">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="rose-tico">
    <div class="no-scale"></div>
  </div>
  <div class="entry short threes" id="amilyn-holdo">
    <div class="no-scale"></div>
  </div><!-- 16 Dec 2017-->
  <div class="entry wide" id="crait">
    <div></div>
  </div><!-- 10 Dec 2017-->
  <div class="entry fours" id="candy">
    <div></div>
  </div>
  <div class="entry fours" id="candycane">
    <div></div>
  </div>
  <div class="entry fours" id="candycorn">
    <div></div>
  </div>
  <div class="entry fours" id="syrup">
    <div></div>
  </div><!-- 22 May 2017-->
  <div class="entry wide" id="birthday">
    <div></div>
  </div><!-- 13 February 2017 - #dailycssimages -->
  <div class="entry" id="mike-wazowski">
    <div></div>
  </div>
  <div class="entry" id="sully">
    <div></div>
  </div><!-- 12 February 2017 - #dailycssimages -->
  <div class="entry threes" id="frankenstein">
    <div></div>
  </div>
  <div class="entry threes" id="zombie">
    <div></div>
  </div>
  <div class="entry threes" id="vampire">
    <div></div>
  </div><!-- 11 February 2017 - #dailycssimages -->
  <div class="entry" id="cheesecake">
    <div></div>
  </div>
  <div class="entry" id="pie">
    <div></div>
  </div><!-- 5 February 2017 - #dailycssimages -->
  <div class="entry threes" id="pizza-pie">
    <div></div>
  </div>
  <div class="entry threes" id="hamburger">
    <div></div>
  </div>
  <div class="entry threes" id="taco">
    <div></div>
  </div><!-- 1 February 2017 - #dailycssimages -->
  <div class="entry threes" id="clock">
    <div></div>
  </div>
  <div class="entry threes" id="supplies">
    <div></div>
  </div>
  <div class="entry threes" id="pencil-cup">
    <div></div>
  </div><!-- 19 January 2017 - #dailycssimages -->
  <div class="entry wide" id="nibbler">
    <div></div>
  </div><!-- 18 January 2017 - #dailycssimages -->
  <div class="entry" id="tiger">
    <div></div>
  </div><!-- 17 January 2017 - #dailycssimages -->
  <div class="entry" id="beaver">
    <div></div>
  </div><!-- 16 January 2017 - #dailycssimages -->
  <div class="entry" id="elephant">
    <div></div>
  </div><!-- 14 January 2017 - #dailycssimages -->
  <div class="entry" id="panda-cub">
    <div></div>
  </div><!-- 4 January 2017 -->
  <div class="entry wide" id="triforce">
    <div></div>
  </div><!-- 21 October 2016 -->
  <div class="entry raffle" id="raffle-red">
    <div class="no-scale"></div>
  </div>
  <div class="entry raffle" id="raffle-yellow">
    <div class="no-scale"></div>
  </div><!-- 16 October 2016 -->
  <div class="entry wide" id="alamo">
    <div></div>
  </div><!-- 14 July 2016 -->
  <div class="entry" id="ecto-1">
    <div></div>
  </div>
  <div class="entry" id="stay-puft">
    <div></div>
  </div><!-- 4 July 2016 -->
  <div class="entry" id="zipper">
    <div></div>
  </div>
  <div class="entry" id="jeans-pocket">
    <div></div>
  </div><!-- 29 June 2016 -->
  <div class="entry wide" id="embroidery">
    <div></div>
  </div><!-- 27 June 2016 -->
  <div class="entry" id="inner-tube">
    <div></div>
  </div>
  <div class="entry" id="popsicle">
    <div></div>
  </div><!-- 18 June 2016 -->
  <div class="entry threes cactus" id="cactus1">
    <div></div>
  </div>
  <div class="entry threes cactus" id="cactus2">
    <div></div>
  </div>
  <div class="entry threes cactus" id="cactus3">
    <div></div>
  </div><!-- 16 June 2016 -->
  <div class="entry threes" id="graham-cracker">
    <div></div>
  </div>
  <div class="entry threes" id="marshmallow2">
    <div></div>
  </div>
  <div class="entry threes" id="chocolate">
    <div></div>
  </div><!-- 9 June 2016 -->
  <div class="entry threes" id="vinyl-record">
    <div></div>
  </div>
  <div class="entry threes" id="cassette">
    <div></div>
  </div>
  <div class="entry threes" id="cd">
    <div></div>
  </div><!-- 28 April 2016 -->
  <div class="entry" id="pizza-works">
    <div></div>
  </div>
  <div class="entry" id="pizza-marg">
    <div></div>
  </div><!-- 15 December 2015 -->
  <div class="entry wide tall" id="bb8">
    <div class="no-scale"></div>
  </div><!-- 16 December 2015 -->
  <div class="entry" id="lightsaber-luke">
    <div></div>
  </div><!-- 16 December 2015 -->
  <div class="entry" id="lightsaber-darth">
    <div></div>
  </div><!-- 23 April 2015 -->
  <div class="entry" id="moonrise-kingdom">
    <div></div>
  </div><!-- 23 April 2015 -->
  <div class="entry" id="royal-tenenbaums">
    <div></div>
  </div><!-- 23 April 2015 -->
  <div class="entry wide" id="grand-budapest">
    <div></div>
  </div><!-- 31 March 2015 -->
  <div class="entry" id="luggage-tag1">
    <div></div>
  </div><!-- 31 March 2015 -->
  <div class="entry" id="luggage-tag2">
    <div></div>
  </div><!-- 4 February 2015 -->
  <div class="entry" id="button">
    <div></div>
  </div><!-- 3 February 2015 -->
  <div class="entry" id="shirt-tag">
    <div></div>
  </div><!-- 11 November 2014 -->
  <div class="entry" id="corn-dog">
    <div></div>
  </div><!-- 11 November 2014 -->
  <div class="entry" id="candy-apple">
    <div></div>
  </div><!-- 20 October 2014 -->
  <div class="entry wide" id="vacancy">
    <div></div>
  </div><!-- 20 October 2014 -->
  <div class="entry wide" id="cupcake">
    <div></div>
  </div><!-- 14 August 2014 -->
  <div class="entry" id="mario-mushroom">
    <div></div>
  </div><!-- 14 August 2014 -->
  <div class="entry" id="mario-tube">
    <div></div>
  </div><!-- 5 August 2014 -->
  <div class="entry" id="macarons">
    <div class="no-scale"></div>
  </div><!-- 14 July 2014 -->
  <div class="entry" id="moleskine">
    <div></div>
  </div><!-- 26 June 2014 -->
  <div class="entry" id="crayon">
    <div></div>
  </div><!-- 25 June 2014 -->
  <div class="entry" id="marker">
    <div></div>
  </div><!-- 21 June 2014 -->
  <div class="entry" id="tardis">
    <div></div>
  </div><!-- 20 June 2014 -->
  <div class="entry" id="hobbit-door">
    <div></div>
  </div><!-- 16 June 2014 -->
  <div class="entry wide" id="mickey-hat">
    <div></div>
  </div><!-- 12 June 2014 -->
  <div class="entry wide" id="key">
    <div></div>
  </div><!-- 11 June 2014 -->
  <div class="entry" id="soccer">
    <div></div>
  </div><!-- 11 June 2014 -->
  <div class="entry" id="brazil">
    <div></div>
  </div><!-- 10 June 2014 -->
  <div class="entry" id="sushi">
    <div></div>
  </div><!-- 9 June 2014 -->
  <div class="entry" id="marshmallow">
    <div></div>
  </div><!-- 7 June 2014 -->
  <div class="entry wide" id="battery">
    <div></div>
  </div><!-- 30 May 2014 -->
  <div class="entry" id="breakfast">
    <div></div>
  </div><!-- 24 May 2014 -->
  <div class="entry" id="cpt-america">
    <div></div>
  </div><!-- 23 May 2014 -->
  <div class="entry" id="bloody-mary">
    <div></div>
  </div><!-- 22 May 2014 -->
  <div class="entry" id="camera">
    <div></div>
  </div>
  <script>
    (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date(); a = s.createElement(o),
      m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'js/index.js', 'ga');

    ga('create', 'UA-30574510-2', 'singlediv.com');
    ga('send', 'pageview');

  </script>
</body>

</html>